<template>
  <div class="viewbox">
    <div class="full_w cardbox mb_20">
      <div class="full_w flex">
        <div class="imgbox">
          <img src="" alt="" class="img" />
        </div>
        <div class="top_right">
          <div class="m_5">已签收</div>
          <div class="m_5">湖南省 长沙市</div>
          <div class="m_5">吹风机 GN3495 GN3494</div>
        </div>
      </div>
    </div>
    <div class="full_w cardbox mb_20">
      <div class="flexrowbetween border_b">
        <div class="flex aligncenter">
          <img src="" alt="" class="imginfo mr_15" />
          <div class="mr_15">中通快递</div>
          <div class="mr_15">78685635217377</div>
        </div>
        <div class="flex">
          <div class="mr_15 commhover c_primary">复制</div>
          <div class="">联系电话：953211</div>
        </div>
      </div>
      <div class="pt_30">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            color="#0bbd87"
          >
            <span class="pr_15 f-13">{{activity.status}}</span>
            <span class="pr_15 f-13">{{ activity.content }}</span>
            <span class="pr_15 f-13">{{activity.type}}</span>
            <span class="f-13">{{activity.time}}</span>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activities: [
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
      ],
    };
  },

  methods: {
    handleclose() {
      this.$emit("close");
    },

    handleClick() {},

    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    submit() {
      this.$modal.msgSuccess("复制成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.viewbox {
  max-height: 680px;
}
.cardbox {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 20px;
}
.imgbox {
  width: 86px;
  height: 86px;
  img {
    width: 100%;
    height: 100%;
  }
}
.top_right {
  width: calc(100% - 86px);
  padding-left: 20px;
}
.imginfo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.border_b {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.el-timeline{
  padding-left: 0;
}
</style>
// <style lang="scss">
// .appendbg{
//   .el-input-group__append{
//     background-color: #4A73FF;
//     color: white;
//   }
// }
//
</style>